<template>
	<view>
		<view class="nav">
			<view class="retrun">
				<image src="../../static/left.png"></image>
			</view>
			<view class="title">主体查询</view>
			<view class=""></view>
		</view>
		<view style="padding: 30rpx;">
			<view class="search">
				<image src="../../static/search.png"></image>
				<input type="text" value="" placeholder="经营单位名称/统一社会信用代码..." />
			</view>
			<view class="screen">
				<view class="pull" @click="toOpen" v-if="isOpen">筛选条件<image src="../../static/pull-top.png"></image></view>
				<view class="pull" @click="toOpen" v-else>筛选条件<image src="../../static/pull-down.png"></image></view>
				<view class="screen1" v-if="isOpen">
					<selectBox name="领域" :list="field" @selectbox="getId"></selectBox>
					<selectBox name="行业" :list="industry" @selectbox="getId1"></selectBox>
					<selectBox name="市场" :list="market"></selectBox>
					<selectBox name="所在区域" :list="region"></selectBox>
					<selectBox name="证照状态" :list="licence"></selectBox>
					<selectBox name="经营状态" :list="management"></selectBox>
				</view>
			</view>
		</view>
		<view class="companylist">
			<view class="numl">共<text>33333</text>个</view>
			<view class="items" v-for="(item,index) in tmerchants" :key="item.id" @click="toDetail({id:item.id,idx:index})">
				<view class="items_1">
					<view class="items_11">
						<view class="head" :style="{background:bjColor[index%4]}">{{item.operatingSubjectName.slice(0,1)}}</view>
						<view class="name">
							<view><text>{{item.operatingSubjectName}}</text><text :class="{ 'active1' : item.operatingState==1, 'active2' : item.operatingState==2}">{{item.operatingState==1?"正常":"疑似停业"}}</text></view>
							<view>统一社会信用代码：<text>{{item.identification}}</text></view>
						</view>
					</view>
					<view class="items_22">
						<text>{{item.mainCategory}}</text><text>{{item.thinCategory}}</text><text>{{item.thirdCategory}}</text>
					</view>
					<view class="items_33">
						<view class="">
							<view class="i_title">法定代表人</view>
							<view class="i_cont">{{item.legalRepresentative}}</view>
						</view>
						<view class="">
							<view class="i_title">所在区域</view>
							<view class="i_cont">{{item.unitZoning}}</view>
						</view>
						<view class="">
							<view class="i_title">证照状态</view>
							<view class="i_cont">{{item.licenceState}}</view>
						</view>
					</view>
				</view>
				<view class="items_2">
					<image src="../../static/phone.png" mode=""></image>
					{{item.enterpriseContactNumber}}
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
	import selectBox from "../../components/select-box.vue"
	import drop from "../../components/dt-dropdown.vue"
	
	import {backendHome,field,industry,region,licence,management,tmerchants} from "../../request/config.js"
	export default {
		components:{selectBox,drop},
		data() {
			return {
				isActive: true,
				isOpen:false,
				region:[],  // 所在区域
				licence:[], // 证照状态
				management:[],  // 经营状态
				bjColor:["#5159FB","#2CAAFF","#8D60E5","#E859CA"],
				tmerchants:[],  // 列表信息
				backendHome:[],
				field:[], // 领域
				industry:[], // 行业
				market:[]  // 市场
			}
		},
		mounted() {
			field().then(res=>{  // 领域
				// console.log(res.data.data)
				this.field=res.data.data;
			}),
			
			region().then(res=>{  // 所在区域
				// console.log(res.data.data)
				this.region=res.data.data;
			})
			licence().then(res=>{  // 证照状态
				// console.log(res.data.data.data)
				this.licence=res.data.data.data;
			})
			management().then(res=>{  // 经营状态
				// console.log(res.data.data.data)
				this.management=res.data.data.data;
			})
			
			tmerchants().then(res=>{  // 列表
				console.log(res.data.data.records)
				this.tmerchants=res.data.data.records;
				res.data.data.records.forEach((item,index)=>{
					// console.log(item.licenceState)
					if(item.licenceState===3){
						item.licenceState="异常数据"
					}else if(item.licenceState===2){
						item.licenceState="无证其他"
					}if(item.licenceState===1){
						item.licenceState="有证有照"
					}
				})
			}),
			backendHome().then(res=>{
				// console.log(res.data.data.subjectStatisticsTree)
				this.backendHome=res.data.data.subjectStatisticsTree;
				this.backendHome.forEach((value,index)=>{
					this.field.push(value.label) 
					// console.log(value.children)
				})
			})
			
		},
		methods: {
			toOpen(){
				this.isOpen=!this.isOpen
			},
			toDetail(e){
				// console.log(e)
				uni.navigateTo({
					url: 'detail?aa='+JSON.stringify(e)
				});
			},
			getId(id){
				// console.log(id)
				industry(id).then(res=>{
					// console.log(res.data.data)
					this.industry=res.data.data;
				})
			},
			getId1(id){
				industry(id).then(res=>{
					// console.log(res.data.data)
					this.market=res.data.data;
				})
			}
		},
		computed:{}
	}
</script>

<style scoped lang="stylus">
	.nav{
		color :#FFFFFF;
		height :128rpx
		background: linear-gradient(0deg, #0D1533, #182D5E);
		display :flex;
		justify-content :space-between;
		padding :0 17rpx 20rpx;
		align-items :flex-end;
		box-sizing :border-box;
		view{
			&:last-child{
				width :44rpx;
				height :44rpx;
			}
		}
		.retrun{
			width :44rpx;
			height :44rpx;
			image{
				width :44rpx;
				height :44rpx;
			}
		}
		.title{
			font-size :36rpx;
		}
	}
	.search{
		height :62rpx;
		background-color :#F1F3F5;
		border-radius:4rpx;
		display :flex;
		align-items :center;
		padding-left :23rpx;
		input{
			font-size :28rpx;
			color :#C7C7C7;
			height :62rpx;
			line-height: 62rpx;
			width :100%;
			padding-left :18rpx;
		}
		image{
			width :32rpx;
			height :32rpx;
		}
	}
	.screen{
		.pull{
			font-size :26rpx;
			color :#409EFF;
			line-height :45rpx;
			text-align :center;
			margin :32rpx auto 0;
			width :180rpx;
			image{
				width :32rpx;
				height :32rpx;
				vertical-align :middle;
				margin-left :6rpx;
			}
		}
		.screen1{
			display:flex;
			flex-wrap :wrap;
			justify-content :space-between;
		}
	}
	.companylist{
		background-color :#F6F8F9;
		.numl{
			height :87rpx;
			font-size :26rpx;
			color :#999999;
			padding-left :32rpx;
			line-height :87rpx;
			text{
				color :#409EFF;
			}
		}
		.items{
			background-color :#FFFFFF;
			margin-bottom :16rpx;
			.items_1{
				border-bottom :1px solid #eeeeee;
				padding :36rpx 30rpx;
				box-sizing :border-box;
				.items_11{
					display :flex;
					.head{
						width :88rpx;
						height :88rpx;
						margin-right :24rpx;
						border-radius :8rpx;
						color :#FFFFFF;
						display: flex;
						justify-content :center;
						align-items :center;
						font-size :48rpx;
					}
					.name{
						view{
							&:first-child{
								display :flex;
								align-items :center;
								text{
									&:first-child{
										font-size :34rpx;
										color :#282828;
										overflow: hidden;
										text-overflow: ellipsis;
										white-space: nowrap;
									}
									&:last-child{
										border-radius: 4rpx;
										font-size :20rpx;
										padding :2rpx 8rpx;
										margin-left :18rpx;
									}
								}
								.active1{
									color:#3EC080;
									border: 1rpx solid #54C78F;
								}
								.active2{
									color:#FA3434;
									border: 1rpx solid #FA3434;
								}
							}
							&:last-child{
								font-size :26rpx;
								margin-top :10rpx;
								color :#999999;
								text{
									color :#333333;
								}
							}
						}
					}
				}
				.items_22{
					padding-left :112rpx;
					text{
						display :inline-block;
						font-size :22rpx;
						margin-right :12rpx;
						margin-top :24rpx;
						border-radius: 4rpx;
						line-height :40rpx;
						padding 0 8rpx
						&:first-child{
							background-color: #C8F1F0;
							color :#40C0BB;
						}
						&:nth-child(2){
							background-color:rgba(#409EFF,.2) ;
							color :#409EFF;
							
						}
						&:last-child{
							background-color: #FCE8DA;
							color :#F28758;
						}
					}
				}
				.items_33{
					display :flex;
					justify-content :space-around;
					margin-top :32rpx;
					view{
						text-align :center;
					}
					.i_title{
						font-size :24rpx;
						color :#999999;
					}
					.i_cont{
						font-size :26rpx;
						color :#333333;
						margin-top :28rpx;
					}
				}
			}
			.items_2{
				font-size :28rpx;
				color :#1492FF;
				height:90rpx;
				line-height :90rpx;
				padding-left: 42rpx;
				image{
					width :28rpx;
					height :28rpx;
					margin-right :13rpx
					vertical-align :middle;
				}
			}
		}
	}
</style>
